iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
自我挑戰組

前端新手的學習筆記系列 第 6

Day06:每天一個小練習 - JS時間轉中文

  • 分享至 

  • xImage
  •  

接續昨天的自動更新時間,來把時間轉成中文吧。


最土法煉鋼的方式就是像把星期幾轉成中文一樣,按照需求寫幾個包括所有數字的陣列,例如:

let arrDate = [ "一", "二", "三", "四", "五", "六",...(略)...,"三十一"];

但是這樣感覺要寫的中文字好多,今天試著把時間數字拆開來練習看看吧。
這個方法不一定是對的,主要的目的是練習JS。

先在方訊內列出存放資料的容器和所需陣列,並設置參數num

const intoC = num => { 
    let str = ''; //用來存資料
    let arr = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '二十', '三十','四十','五十'];
    }//注意0的位置是''

把傳入的數字拆開成十位數和個位數

    let tenNum = parseInt(num / 10); //取十位數
    let oneNum = parseInt(num % 10); //取個位數

個位數可以直接使用,十位數用switch case篩選

switch (true) {
        case (num >= 10 && num < 20):
            tenNum = 10;
            break;
        case (num >= 20 && num < 30):
            tenNum = 11;
            break;
        case (num >= 30 && num < 40):
            tenNum = 12;
            break;
        case (num >= 40 && num < 50):
            tenNum = 13;
            break;
        case (num >= 50):
            tenNum = 14;
            break;
        default:
            break;
    }

篩選完放入準備好的容器內回傳

  str = `${arr[tenNum]}${arr[oneNum]}`;
   return str;

再配合昨天寫好的code就OK了。

但又會出現一個問題,秒數是有0秒存在的,預設的陣列裡沒有零。
這時就用if包住剛剛的switch把0和其他數字區分開來吧。

if (num == 0) {
        str = `零`;
    } else {
        switch (true) {
            (略)
        }
        str = `${arr[tenNum]}${arr[oneNum]}`;
    }

完整的code

const allTime = document.querySelector('.allTime');

let showTime = () => { //不能放外面,setInterval抓不到
    let date = new Date();
    let year = date.getFullYear(); //取得當前年份
    let month = date.getMonth() + 1; //取得月份,從0開始計算,必須+1
    let today = date.getDate(); //取得日期
    let week = date.getDay(); //取得星期幾
    let hour = date.getHours(); //取得小時
    let min = date.getMinutes(); //取得分鐘
    let sec = date.getSeconds(); //取得秒數
    let arr = ["日", "一", "二", "三", "四", "五", "六"]; //讀取星期幾的陣列

    allTime.innerHTML = `
<p>今天是${intoC(month)}月${intoC(today)}日,<br>
時間為${intoC(hour)}時${intoC(min)}分${intoC(sec)}秒</p>`
    ;
}

const intoC = num => { //轉中文
    // let num = 31;//測試用
    let str = ''; //用來存資料
    let arr = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '二十', '三十','四十','五十'];
    let tenNum = parseInt(num / 10); //取十位數
    let oneNum = parseInt(num % 10); //取個位數
   if (num == 0) {
        str = `零`;
    } else {
        switch (true) {
            case (num >= 10 && num < 20):
                tenNum = 10;
                break;
            case (num >= 20 && num < 30):
                tenNum = 11;
                break;
            case (num >= 30 && num < 40):
                tenNum = 12;
                break;
            case (num >= 40 && num < 50):
                tenNum = 13;
                break;
            case (num >= 50):
                tenNum = 14;
                break;
            default:
                break;
        }
        str = `${arr[tenNum]}${arr[oneNum]}`;
    }
    // console.log(str);
    return str;
}
// intoC();

setInterval(showTime, 1000);

連結


上一篇
Day05:每天一個小練習 - JS顯示今日時間
下一篇
Day07:每天一個小練習 - JS抓取資料並顯示
系列文
前端新手的學習筆記32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言